<script setup lang="ts"></script>

<template>
    <view class="item">
        <view class="item__left">
            <u-avatar size="122" shape="round" :src="'@/assets/img/header.webp'"></u-avatar>
        </view>
        <view class="item__right">
            <view class="messagetop">
                <view class="messagetop__name">姚文美子</view>
                <view class="messagetop__time">09:20</view>
            </view>
            <view class="messagebottom">
                <view class="messagebottom__text">亲，宝贝您收到了吗？满意的话帮忙点5颗星，晒晒美图哦，感谢您的支持，...</view>
                <view class="messagebottom__total">3</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(item) {
    display: flex;
    width: 682rpx;
    margin-bottom: 70rpx;
    @include e(left) {
        width: 122rpx;
        height: 122rpx;
        border-radius: 148rpx;
        margin-right: 30rpx;
    }
    @include e(right) {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

@include b(messagetop) {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18rpx;
    @include e(name) {
        color: #101010;
        font-size: 28rpx;
    }
    @include e(time) {
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
    }
}
@include b(messagebottom) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include e(text) {
        width: 430rpx;
        height: 62rpx;
        color: rgba(153, 153, 153, 1);
        font-size: 24rpx;
    }
    @include e(total) {
        width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        border-radius: 18rpx;
        background-color: rgba(71, 85, 233, 1);
        color: #101010;
        font-size: 24rpx;
        text-align: center;
    }
}
</style>
